<template>
  <div class="v-diagram-conifg-model-select-tree">
    <m-tree
      :tree-data="treeData"
      :getChildren="getChildren"
      :lazy="lazy"
      :loadNodes="loadNodes"
      customLoadResult
      @expand="handleExpand"
    >
      <template #default="{ nodeData }">
        <span
          :id="nodeData.id"
          class="row"
          :class="{ _selected: nodeData.selected, _disabled: nodeData.disabled }"
          @click="handleNodeClick(nodeData)"
          @contextmenu="e => handleContextmenu(nodeData, e)"
          @dblclick="addSelectedNodeToRight"
        >
          <el-checkbox
            v-if="checkable"
            :model-value="nodeData.checked"
            :indeterminate="nodeData.isIndeterminate"
            size="large"
            @change="handleNodeCheck(nodeData)"
            @click.stop
          />

          <img
            :src="nodeData.icon"
            style="width: 16px; height: 16px; object-fit: contain"
          />
          <span
            v-if="!nodeData.inEdit && !showNodeLabel"
            class="text g-pd-lr-2"
          >
            {{ nodeData.name }}
          </span>
          <NodeLabel
            v-if="showNodeLabel && nodeData.data"
            :nodeData="nodeData.data"
            :selected="nodeData.selected"
            :disabled="nodeData.disabled || !nodeData.data.selectable"
          />
          <el-input
            v-if="nodeData.inEdit"
            v-model="nodeData.nameForEdit"
            v-focus
            size="small"
            class="_name-input"
            @blur="handleSaveTitle(nodeData, 'blur')"
            @keyup.enter="handleSaveTitle(nodeData, 'enter')"
          />
        </span>
      </template>
    </m-tree>
  </div>
</template>

<script lang="ts" setup>
import MTree from "@/common/Tree/MTree.vue";
import { MTreeNode } from "@/common/Tree/MTreeNode";
import NodeLabel from "@/modules/model/comps/station/sider/modelTree/modelTree/NodeLabel.vue";

interface Props {
  treeData: MTreeNode[];
  getChildren?: (node: MTreeNode) => MTreeNode[];
  checkable?: boolean;
  showNodeLabel?: boolean;
  lazy?: boolean;
  loadNodes?: Function;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = withDefaults(defineProps<Props>(), {
  checkable: false,
  showNodeLabel: false
});
const emit = defineEmits<{
  (event: "handleNodeClick", data: MTreeNode): void;
  (event: "handleNodeCheck", data: MTreeNode): void;
  (event: "handleExpand", data: MTreeNode): void;
  (event: "handleContextmenu", data: MTreeNode, e: MouseEvent): void;
  (event: "handleSaveTitle", data: MTreeNode, triggerType: "blur" | "enter"): void;
  (event: "addSelectedNodeToRight"): void;
}>();

const handleExpand = (node: MTreeNode) => {
  emit("handleExpand", node);
};

const handleNodeClick = (node: MTreeNode) => {
  emit("handleNodeClick", node);
};

const handleNodeCheck = (node: MTreeNode) => {
  emit("handleNodeCheck", node);
};

const handleContextmenu = (node: MTreeNode, e: MouseEvent) => {
  emit("handleContextmenu", node, e);
};

const addSelectedNodeToRight = () => {
  emit("addSelectedNodeToRight");
};

const handleSaveTitle = (node: MTreeNode, triggerType: "blur" | "enter") => {
  emit("handleSaveTitle", node, triggerType);
};
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.v-diagram-conifg-model-select-tree {
  height: 100%;
  overflow: auto;
  .row {
    vertical-align: middle;
    line-height: 16px;
    padding-left: 2px;
    // color: #000;
    cursor: pointer;
    &._selected {
      .text {
        background-color: $theme-color;
        color: #fff;
      }
    }
    .el-checkbox {
      line-height: 16px;
      vertical-align: middle;
      margin-right: 4px;
      height: 14px;
    }

    .text {
      margin-left: 2px;
      font-size: 12px;
      line-height: 16px;
      vertical-align: middle;
    }
    ._name-input {
      vertical-align: middle;
      height: 18px;
      font-size: 12px;
      line-height: 18px;
      width: 100px;
      margin-left: 3px;
      border-radius: 0px;
      .el-input__inner {
        height: 18px;
        font-size: 12px;
        line-height: 18px;
        padding: 0 1px;
      }
    }

    // 以下重写NodeLabel样式
    .v-model-tree-node-label {
      &._is-new {
        ._name-label {
          color: #000;
        }

        ._pre-label {
          color: #000 !important;
        }
      }

      &._disabled {
        ._name-label {
          color: #979797;
        }
        ._type-label {
          color: #979797;
        }
        ._default-value-label {
          color: #979797;
        }
      }
      &._selected {
        background-color: $theme-color;

        color: #fff;
        ._name-label {
          color: #fff;
        }
        ._type-label {
          color: #fff;
        }
        ._default-value-label {
          color: #fff;
        }

        ._pre-label {
          color: #fff !important;
        }
      }
    }
  }
}
</style>
